<template>
    <div class="recommend">
        <el-tabs class="madp-el-tabs" v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="文章" name="1"></el-tab-pane>
            <el-tab-pane label="链接" name="2"></el-tab-pane>
            <el-tab-pane label="海报" name="3"></el-tab-pane>
            <!-- <el-tab-pane label="PDF" name="4"></el-tab-pane>
			<el-tab-pane label="PPT" name="5"></el-tab-pane>
			<el-tab-pane label="表格" name="6"></el-tab-pane>
			<el-tab-pane label="文档" name="7"></el-tab-pane> -->
        </el-tabs>
        <el-alert title="推荐榜示意图（可拖拽排序）" type="info" show-icon :closable="false"></el-alert>
        <!-- 选中数据表格 -->
        <el-table
            ref="chooseTable"
            :header-cell-style="{
                background: 'rgb(255, 191, 191)',
                color: 'rgb(44,44,44)'
            }"
            :data="chooseData"
            row-key="id"
            stripe
        >
            <el-table-column label="序号">
                <template slot-scope="scope">{{ (pageSelect.current - 1) * pageSelect.pageSize + scope.$index + 1 }}</template>
            </el-table-column>
            <el-table-column label="类型">
                <template slot-scope="scope">{{ handleType(scope.row.type) }}</template>
            </el-table-column>
            <el-table-column prop="title" label="标题"></el-table-column>
            <el-table-column prop="updateTime" label="更新时间"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="text" @click="deleteRow(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="madp-save-drag-btn" v-if="chooseData.length > 0">
            <el-button type="primary" @click="saveDragBtnFn">保存拖拽</el-button>
        </div>
        <div class="madp-pagination-wrap">
            <el-pagination
                background
                @size-change="handleSizeChangeSelect"
                @current-change="handleCurrentChangeSelect"
                :current-page.sync="pageSelect.current"
                :page-sizes="[10, 20, 30, 50, 100]"
                :page-size="pageSelect.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pageSelect.total"
            ></el-pagination>
        </div>
        <el-alert title="配置推荐榜，配置完成之后实时生效" type="info" show-icon :closable="false"></el-alert>
        <el-input placeholder="请输入文章标题" maxlength="20" class="madp-recommend-title madp-alert" v-model.trim="inputValue" clearable @change="searchTitleBlurFn"></el-input>
        <!-- 默认表格 -->
        <el-table
            ref="recommedTable"
            :header-cell-style="{
                background: 'rgb(255, 191, 191)',
                color: 'rgb(44,44,44)'
            }"
            :data="recommedData"
            stripe
        >
            <el-table-column label="序号">
                <template slot-scope="scope">{{ (page.current - 1) * page.pageSize + scope.$index + 1 }}</template>
            </el-table-column>
            <el-table-column label="类型">
                <template slot-scope="scope">{{ handleType(scope.row.type) }}</template>
            </el-table-column>
            <el-table-column prop="title" label="标题"></el-table-column>
            <el-table-column prop="updateTime" label="更新时间"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="text" @click="chooseRow(scope.row)"> <i class="el-icon-check"></i>选中 </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="madp-pagination-wrap">
            <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="page.current"
                :page-sizes="[10, 20, 30, 50, 100]"
                :page-size="page.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.total"
            ></el-pagination>
        </div>
    </div>
</template>

<script>
import Sortable from 'sortablejs';
import { getRecommedData, chooseMaterial, getChooseData, deleteChooseData, dragSortRecommended } from '@/api/customer-into/marketing-material';
export default {
    props: {
        activeObj: {
            type: Object,
            default: () => {
                return {
                    activeIndex: 0
                };
            }
        }
    },
    data() {
        return {
            // 输入框内容
            inputValue: '',
            // 视图显示
            activeName: '1',
            // 表格数据
            recommedData: [],
            // 表格数据
            chooseData: [],
            // 分页
            page: {
                current: 1, // 当前页
                pageSize: 10,
                total: 0
            },
            // 分页
            pageSelect: {
                current: 1, // 当前页
                pageSize: 10,
                total: 0
            }
        };
    },
    watch: {
        activeObj() {
            if (this.activeObj.activeIndex === 0) {
                this.getRecommedData();
            }
        }
    },
    mounted() {
        this.setSort();
        this.getRecommedData();
        this.getChooseData();
    },
    methods: {
        // 点击切换视图
        handleClick(tab, event) {
            this.page = {
                current: 1, // 当前页
                pageSize: 10,
                total: 0
            };
            // 分页
            this.pageSelect = {
                current: 1, // 当前页
                pageSize: 10,
                total: 0
            };
            this.getRecommedData();
            this.getChooseData();
        },
        //模糊搜索
        searchTitleBlurFn() {
            this.page = {
                current: 1, // 当前页
                pageSize: 10,
                total: 0
            };
            // 分页
            this.pageSelect = {
                current: 1, // 当前页
                pageSize: 10,
                total: 0
            };
            this.getRecommedData();
            this.getChooseData();
        },
        // 获取列表数据
        getRecommedData() {
            const { current, pageSize } = this.page;
            let obj = {
                type: Number(this.activeName),
                title: this.inputValue,
                current: current,
                size: pageSize
            };
            getRecommedData(obj).then((res) => {
                if (res.data.code === 0) {
                    const { total, records } = res.data.data;
                    this.page.total = total;
                    this.recommedData = records;
                }
            });
        },
        // 获取选中素材列表数据
        getChooseData() {
            const { current, pageSize } = this.pageSelect;
            let obj = {
                pageCurrent: current,
                pageSize: pageSize,
                type: Number(this.activeName),
                title: this.inputValue
            };
            getChooseData(obj).then((res) => {
                if (res.data.code === 0) {
                    const { total, records } = res.data.data;
                    this.pageSelect.total = total;
                    this.chooseData = records;
                }
            });
        },
        // 处理data中type的格式
        handleType(type) {
            switch (type) {
                case 1:
                    return '文章';
                case 2:
                    return '链接';
                case 3:
                    return '海报';
                case 4:
                    return 'pdf';
                case 5:
                    return 'ppt';
                case 6:
                    return '表格';
                case 7:
                    return '文档';
            }
        },
        /**
         * 排序方法
         */
        setSort() {
            const el = this.$refs.chooseTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0];
            Sortable.create(el, {
                ghostClass: 'sortable-ghost',
                setData: function(dataTransfer) {
                    dataTransfer.setData('Text', '');
                },
                onEnd: (evt) => {
                    let arr = JSON.parse(JSON.stringify(this.chooseData));
                    let obj = arr.splice(evt.oldIndex, 1)[0];
                    arr.splice(evt.newIndex, 0, obj);
                    this.chooseData = arr;
                }
            });
        },
        //选中每行添加,数据去重
        chooseRow(row) {
            const { title, type, classification } = row;
            chooseMaterial({
                title,
                type,
                classification
            })
                .then((res) => {
                    if (res.data.code === 0) {
                        this.$message({
                            type: 'success',
                            message: '选中成功'
                        });
                        this.getChooseData();
                        this.getRecommedData();
                    }
                })
                .catch(() => {});
        },
        //删除
        deleteRow(index, row) {
            this.$confirm('是否确认删除', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    let obj = {
                        id: row.id,
                        title: row.title,
                        type: row.type,
                        classification: row.classification
                    };
                    deleteChooseData(obj).then((res) => {
                        if (res.data.code === 0) {
                            this.getChooseData();
                            this.$message({
                                type: 'success',
                                message: '删除成功'
                            });
                            this.getRecommedData();
                        }
                    });
                })
                .catch(() => {});
        },
        //未选中推荐分页分页
        handleSizeChange(val) {
            this.page.pageSize = val;
            this.getRecommedData();
        },
        handleCurrentChange(val) {
            this.page.current = val;
            this.getRecommedData();
        },
        //选中推荐分页
        handleSizeChangeSelect(val) {
            this.pageSelect.pageSize = val;
            this.getChooseData();
        },
        handleCurrentChangeSelect(val) {
            this.pageSelect.current = val;
            this.getChooseData();
        },
        //保存拖拽
        saveDragBtnFn() {
            let arr = JSON.parse(JSON.stringify(this.chooseData));
            arr.map((i, index) => {
                i.sort = (this.page.current - 1) * this.page.pageSize + index + 1;
            });
            let obj = {
                marketingRecRanking: arr
            };
            dragSortRecommended(obj).then((res) => {
                if (res.data.code === 0) {
                    this.chooseData = res.data.data;
                    this.$message.success('保存成功');
                    this.getChooseData();
                }
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.madp-pagination-wrap {
    display: flex;
    margin-top: 20px;
    margin-bottom: 18px;
    justify-content: flex-end;
}
.madp-alert {
    margin-top: 20px;
}
.madp-save-drag-btn {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.madp-el-tabs {
    margin: 10px 0px 0px;
    /deep/ .el-tabs__nav-wrap {
        padding-left: 10px;
    }
}
.madp-recommend-title {
    float: right;
    width: 20%;
    margin-bottom: 10px;
}
</style>
